<template>
  <div class="main-box">
    <div class="menu-url">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="from-box">
      <el-form ref="queryFrom" :model="userVO" label-width="70px">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="部门" prop="departmentId">
              <el-select v-model="userVO.departmentId" placeholder="请选择所属部门" clearable :style="{ width: '100%' }">
                <el-option v-for="(item, index) in departments" :key="index" :label="item.name" :value="item.id">
                  <span>{{ item.name }}</span>
                  <span style="float: right">{{ item.deptCount }} 人</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="userVO.username" placeholder="请输入用户名查询" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="userVO.email" placeholder="请输入邮箱查询" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="userVO.sex">
                <el-radio :label="0">男</el-radio>
                <el-radio :label="1">女</el-radio>
                <el-radio :label="-1">全部</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="userVO.nickname" placeholder="请输入昵称查询" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item size="large">
              <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
              <el-button icon="el-icon-search" type="primary" @click="submitForm">提交</el-button>
              <el-button icon="el-icon-plus" type="success" @click="dialogVisible = true">添加</el-button>
              <el-button icon="el-icon-download" type="info" @click="exportExcel">导出</el-button>
              <!-- <el-upload class="upload-demo" action="" :on-preview="handlePreview"
                                :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="2"
                                :on-exceed="handleExceed" :file-list="fileList">
                                <el-button icon="el-icon-upload2" size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传Excel文件</div>
                            </el-upload> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="user-box">
        <el-table :data="userList" border style="width: 100%">
          <el-table-column prop="id" label="#"> </el-table-column>
          <el-table-column prop="username" label="用户名"> </el-table-column>
          <el-table-column prop="sex" label="性别">
            <template slot-scope="scope">
              {{
                scope.row.sex === 0 ? "男" : scope.row.sex === 1 ? "女" : "保密"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="departmentName" label="所属部门" width="160" sortable>
          </el-table-column>
          <el-table-column prop="birth" label="生日" width="160" sortable>
          </el-table-column>
          <el-table-column prop="email" label="邮箱" width="180">
          </el-table-column>
          <el-table-column prop="phoneNumber" label="电话" width="160">
          </el-table-column>
          <el-table-column label="是否禁用" prop="status">
            <template slot-scope="scope">
              <el-switch :value="scope.row.status == 1 ? false : true" @change="changeStatus(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="warning" icon="el-icon-delete" circle></el-button>
            <el-button type="danger" icon="el-icon-setting" circle></el-button>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
          :page-sizes="[4, 5, 6, 7]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <Save :dialogVisible="dialogVisible" :departmentList="departments" @changeShow="changeDialogVisible"></Save>
  </div>
</template>

<script>
  import Save from "../../components/Save/index.vue";
  import {
    getDepartments
  } from "../../api/department";
  import {
    findUserPage,
    modifyStatus,
    excel
  } from "../../api/user";
  export default {
    components: {
      Save,
    },
    name: "user",
    data() {
      return {
        userList: [],
        departments: [],
        userVO: {
          departmentId: undefined,
          username: undefined,
          sex: -1,
          nickname: undefined,
          email: undefined,
        },
        size: 6,
        current: 1,
        total: 0,
        dialogVisible: false,
      };
    },
    methods: {
      async getUserPage() {
        let result = await findUserPage(this.current, this.size, this.userVO);
        this.userList = result.data.userPage.records;
        this.total = result.data.userPage.total;
        console.log(result);
      },
      async getDepartments() {
        let result = await getDepartments();
        this.departments = result.data.departments;
      },
      async modify(id) {
        let result = await modifyStatus(id);
        if (result.success == true) {
          this.getUserPage();
        }
      },
      //导出excel文件
      async exportExcel() {
        excel(this.userVO)
          .then((res) => {
            //这里没有返回数据,但是要在响应头中进行下载操作
            // 将二进制文件转化为可访问的url
            let url = window.URL.createObjectURL(new Blob([res]));
            //创建了一个a标签的超链接
            var a = document.createElement("a");
            //将a标签添加到body内容中
            document.body.appendChild(a);
            a.href = url;
            a.download = "用户列表.xls";
            a.click();
            window.URL.revokeObjectURL(url);
          })
          .catch((err) => {
            console.log(res);
          });
      },
      submitForm() {
        this.current = 1;
        this.getUserPage();
      },
      resetForm() {
        this.$refs["queryFrom"].resetFields();
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.size = val;
        this.getUserPage();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.current = val;
        this.getUserPage();
      },
      changeStatus(row) {
        let str = "解除禁用";
        console.log(row.status);
        if (row.status == 1) {
          str = "禁用";
        }
        this.$confirm(`此操作将${str}此用户:${row.username}, 是否继续?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            //确定禁用
            this.modify(row.id);
            this.$message({
              type: "success",
              message: `${str}成功!`,
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消！",
            });
          });
      },
      changeDialogVisible(val){
        this.dialogVisible = val;
      }
    },
    created() {
      this.getUserPage();
      this.getDepartments();
    },
  };
</script>

<style lang="less" scoped>
  .main-box {
    .menu-url {
      margin-bottom: 15px;

      .el-breadcrumb {
        font-size: 10px;
      }
    }

    .from-box {
      padding: 20px;
      background-color: #fff;
    }
  }
</style>